<template>
  <div class="camera-container">
    <h2>萤石摄像头实时预览</h2>
    <div id="ezuikit-player" class="player"></div> <!-- 播放器容器 -->
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js';

export default {
  name: 'CameraView',
  data() {
    return {
      cameraUrl: 'ezopen://open.ys7.com/AB9831218/1.hd.live', // 替换为你的摄像头播放地址
      token: 'ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns' // 替换为你的有效 Token
    };
  },
  mounted() {
    this.initCameraPreview();
  },
  methods: {
    initCameraPreview() {
      try {
        // 初始化播放器
        new EZUIKit.EZUIKitPlayer({
          id: 'ezuikit-player', // 播放器容器的 ID
          url: this.cameraUrl, // 摄像头播放地址
          accessToken: this.token, // 访问 Token
          template: 'pcLive' // 播放器模板，可选值 'pcLive', 'standard' 等
        });
      } catch (error) {
        console.error('播放器初始化失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.camera-container {
  text-align: center;
  margin-top: 20px;
}
.player {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  background-color: #000;
}
</style>
